import React, { Component } from "react";
import { Toast, Modal } from "antd-mobile";
const alert = Modal.alert;
import "./xhdPayBackList.scss";
import { connect } from "react-redux";
import { InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
//import MainLayout from "../../../component/mainLayout/mainLayout";
import iconArrow from "../../../images/xhdArrow.png";
import { ThemeDefault, ThemeLife } from "../../../tools/theme";

class XhdPayBackList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			billInfo: {},
			billStatus: "",
			repayPlan: [],
			loanInfos: [],
			btnTxet: "立即还款",
			isCanPay: false
		};
	}

	componentDidMount() {
		this.xhdRepayBillInfo();
	}

	//账单信息接口
	xhdRepayBillInfo() {
		const _this = this;
		let objs = {
			url: InterfaceG.xhdRepayBillInfo,
			params: {
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				Toast.hide();
				let btnText = "";
				let isCanPay;
				const data = res.data;
				switch (data.billStatus) {
					case ("-1", "0"):
						btnText = "立即还款";
						isCanPay = false;
						break;
					case "1":
						btnText = "还款中";
						isCanPay = false;
						break;
					case "2":
						btnText = "当期已经结清";
						isCanPay = false;
						break;
					case "3":
						btnText = "立即还款";
						isCanPay = true;
						break;
					case "4":
						btnText = `立即还款`;
						isCanPay = true;
						break;
					default:
						btnText = "立即还款";
						isCanPay = false;
				}
				_this.setState({
					billStatus: data.billStatus,
					billInfo: data,
					repayPlan: data.repayPlan,
					loanInfos: data.loanInfos,
					isCanPay,
					btnText
				});
			} else {
				Toast.hide();
				Toast.info(res.message, 2);
			}
		});
	}

	//点击还款按钮
	gotoPay() {
		if (!this.state.isCanPay) {
			return false;
		}
		alert(
			"温馨提示",
			"您正在发起按期还款，完成还款后直到下个还款日之前，将无法结清还款。",
			[
				{ text: "取消", onPress: () => console.log("cancel") },
				{
					text: "继续还当期",
					onPress: () => {
						this.props.history.push({
							// pathname: '/repaymentMoney',
							// state:{repayBill:'0',fromType:'XHD',loanArray:[],backPath:'xhdPayBackHome'}
							pathname: `/repaymentMoney/${JSON.stringify({
								repayBill: "0",
								fromType: "XHD",
								loanArray: [],
								backPath: "xhdPayBackHome"
							})}`
						});
					}
				}
			]
		);
	}

	gotoDetail(type, params) {
		const { isCanPay, btnText, billInfo } = this.state;
		this.props.history.push({
			pathname: "/xhdPayBackListDetail",
			state: {
				datas: params,
				type,
				payDatas: {
					isCanPay,
					btnText,
					billInfo
				}
			}
		});
	}

	gotoxhdRecordList() {
		this.props.history.push("/xhdRecordList");
	}

	render() {
		let { billInfo, repayPlan, loanInfos, btnText, isCanPay } = this.state;
		// let _pageParams = {
		// 	header: {
		// 		title: "还款",
		// 		goBackPath: "/xhdPayBackHome",
		// 		rightButt: "借还记录",
		// 		rightButtCallBack: this.gotoxhdRecordList.bind(this)
		// 	},
		// 	history: this.props.history,
		// 	cacheLifecycles: this.props.cacheLifecycles
		// };
		return (
			<div className="xhd-payback-list">
				{billInfo.billOverDays && (
					<div className="over-data-text">
						已逾期{billInfo.billOverDays}天，请及时还款!
					</div>
				)}

				<div className="payBack-list-heard">
					<h3>{billInfo.latestRepayDate}应还（元）</h3>
					<h2 onClick={this.gotoDetail.bind(this, "1", loanInfos)}>
						{billInfo.billTotal}
						<span>
							{" "}
							<img src={iconArrow} />{" "}
						</span>{" "}
					</h2>
					<ThemeDefault>
						<div
							onClick={this.gotoPay.bind(this)}
							className={!isCanPay ? "btn btn-disabled" : "btn"}
						>
							{btnText || "立即还款"}
						</div>
					</ThemeDefault>
					<ThemeLife>
						<div
							onClick={this.gotoPay.bind(this)}
							className={
								!isCanPay ? "btn btn-disabled a-gradient" : "btn a-gradient"
							}
						>
							{btnText || "立即还款"}
						</div>
					</ThemeLife>
				</div>
				<div className="payBack-list-item">
					<div className="list-item-title">剩余还款计划</div>
					<div className="payBack-plan">
						{repayPlan.map((item, index) => {
							return (
								<div key={index} className="payBack-plan-item">
									<h4>{item.billTermDate}</h4>

									<ThemeDefault>
										<div
											className="icon-yy"
											style={{ background: "#fff", width: "1px" }}
										>
											<i
												style={{
													width: "0.22rem",
													height: "0.22rem",
													boxSizing: "border-box",
													top: "-0.14rem",
													left: "-0.10rem"
												}}
											></i>
											<div
												className="line"
												style={{
													witdh: "100%",
													height: "100%",
													background: "#D8D8D8",
													marginTop: "0.06rem"
												}}
											></div>
										</div>
									</ThemeDefault>
									<ThemeLife>
										<div
											className="icon-yy"
											style={{ background: "#fff", width: "1px" }}
										>
											<i
												style={{
													borderColor: "#F82633",
													width: "0.22rem",
													height: "0.22rem",
													boxSizing: "border-box",
													top: "-0.14rem",
													left: "-0.10rem"
												}}
											></i>
											<div
												className="line"
												style={{
													witdh: "100%",
													height: "100%",
													background: "#D8D8D8",
													marginTop: "0.06rem"
												}}
											></div>
										</div>
									</ThemeLife>

									<div className="payBack-plan-monery">
										<h5>
											<ThemeDefault>
												<p> ¥{item.billTermTotal}</p>
												{item.isCurrent == "Y" && (
													<span
														className={
															item.billTermOverDays != "0" ? "over-date" : ""
														}
													>
														{item.billTermOverDays != "0"
															? `逾期${item.billTermOverDays}天`
															: "本期应还"}
													</span>
												)}
											</ThemeDefault>
											<ThemeLife>
												<p style={{ fontSize: "0.32rem" }}>
													{" "}
													¥{item.billTermTotal}
												</p>
												<div className="tip">
													含本金{item.billTermPrin}+利息{item.billTermInt}
												</div>
												{item.isCurrent == "Y" && (
													<span
														className={
															item.billTermOverDays != "0" ? "over-date" : ""
														}
														style={
															item.billTermOverDays != "0"
																? { background: "#F82633" }
																: {}
														}
													>
														{item.billTermOverDays != "0"
															? `逾期${item.billTermOverDays}天`
															: "本期应还"}
													</span>
												)}
											</ThemeLife>
										</h5>
										<span onClick={this.gotoDetail.bind(this, "2", item)}>
											<img src={iconArrow} />{" "}
										</span>
									</div>
								</div>
							);
						})}

						{/* <div className="payBack-plan-item">
                                <h4>6月14日</h4>
                                <div className="icon-yy">
                                    <i></i>
                                </div>
                                <div className="payBack-plan-monery">
                                    <h5>¥124.35</h5>
                                    <span> > </span>
                                </div>
                            </div>
                            <div className="payBack-plan-item">
                                <h4>6月14日</h4>
                                <div className="icon-yy">
                                    <i></i>
                                </div>
                                <div className="payBack-plan-monery">
                                    <h5>¥124.35</h5>
                                    <span> > </span>
                                </div>
                            </div> */}
					</div>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const XhdPayBackListPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhdPayBackList);
export default XhdPayBackListPage;
